import { Component, PropEditor, PropEditorState } from "maishu-jueying";
import { MemberPage, Props as ComponentProps } from "./component";
import React = require("react");
import { createService } from "components/common/base-component";
import { ImageService } from "maishu-services-sdk";
import { showImageDialog } from "controls/image-manager";
import { checkbox } from "components/common/custom-prop-editors";

class ImageEditor extends PropEditor<PropEditorState<string>, string> {

    private imageService: ImageService;

    constructor(props) {
        super(props);

        this.imageService = createService(ImageService);
    }

    render() {
        let { value } = this.props;
        let bg = value ? this.imageService.imageSource(value) : MemberPage.defaultProps.bg;
        return <span style={{ display: 'table-cell', width: 120, height: 66, textAlign: 'center', cursor: 'pointer' }}>
            <img src={bg} style={{ width: '100%', height: '100%' }}
                onClick={e => {
                    showImageDialog(1, (imageIds) => {
                        this.props.updateComponentProp(imageIds[0]);
                    })
                }} />
        </span>
    }
}

let bg: keyof ComponentProps = "bg"
Component.setPropEditor({
    componentType: MemberPage,
    propName: bg,
    editorType: ImageEditor,
    displayName: "背景图片"
})

let showBalance: keyof ComponentProps = "showBalance";
Component.setPropEditor(({
    componentType: MemberPage,
    propName: showBalance,
    editorType: checkbox("显示余额"),
    displayName: "余额"
}))

let showScore: keyof ComponentProps = "showScore";
Component.setPropEditor({
    componentType: MemberPage,
    propName: showScore,
    editorType: checkbox("显示积分"),
    displayName: "积分"
})